<style lang="scss">

.equity-introduce {
	min-height: 100vh;
	background-color: #F1F1F1;
}

.equity-introduce-list-title, .equity-introduce-type-title {
	background-color: #FFF;
	display: block;
}

.equity-introduce-list-title {
	padding-top: 62rpx;
}

.equity-introduce-type-title {
	padding-top: 66rpx;
}

.equity-introduce-type-list {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 46rpx 69rpx 46rpx;
	background-color: #FFF;
}

.equity-introduce-type-list .equity-introduce-type-list-item {
	width: calc((100% - 37rpx * 2) / 3);
	display: block;
}

</style>
<template>
	<view class="equity-introduce">

		<nav-bar
			title="权益介绍"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

		<!-- 头部 -->
		<equity-introduce-header></equity-introduce-header>

		<!-- 可享权益-标题 -->
		<category-title title="可享权益" class="equity-introduce-list-title"></category-title>

		<!-- 可享权益-列表 -->
		<list></list>

		<!-- 类型-标题 -->
		<category-title title="选择开通类型" class="equity-introduce-type-title"></category-title>

		<!-- 类型-列表 -->
		<view class="equity-introduce-type-list">

			<type-item
				class="equity-introduce-type-list-item"
				:select="0 == type"
				title="单人年卡"
				tag="限时折扣"
				:price="598"
				desc="¥998/年"
				:desc-decoration="true"
				@click="onClickType(0)"
			></type-item>

			<type-item
				class="equity-introduce-type-list-item"
				:select="1 == type"
				title="双人年卡套餐"
				tag="推荐直降1000"
				:price="996"
				desc="¥1996/年"
				:desc-decoration="true"
				@click="onClickType(1)"
			></type-item>

			<type-item
				class="equity-introduce-type-list-item"
				:select="2 == type"
				title="信用卡积分购"
				tag="最低"
				:price="0"
				desc="前往换购"
				:desc-decoration="false"
				@click="onClickType(2)"
			></type-item>

		</view>

		<!-- 兑换码兑换 -->
		<cell-convert></cell-convert>

		<!-- 底部 -->
		<equity-introduce-footer></equity-introduce-footer>

	</view>
	
</template>

<script>

import Header from "./header";
import Footer from "./footer";
import CategoryTitle from "./category-title";
import List from "./equity-introduce-list";
import TypeItem from "./type-item";
import CellConvert from "./cell-convert";

export default {

	components: {
		"equity-introduce-header": Header,
		"equity-introduce-footer": Footer,
		CategoryTitle,
		List,
		TypeItem,
		CellConvert,
	},

	data() {
		return {
			type: 0,
		}
	},

	methods: {

		onClickType(t) {
			this.type = t;
		}

	}

}
</script>